<template>
  <div class="box">
    <!-- 标题 -->
    <div class="title">
      <div class="title_fan">
        <span class="el-icon-arrow-left"
              @click="$router.go(-1)"></span>
      </div>
      <!-- 会员 -->
      <div class="vip_info">
        <label for="uploadImg">
          <input
            @change="uploadImgFun"
            id="uploadImg"
            type="file"
            accept="image/png,image/gif,image/jpeg"
            class="inputImg"/>
          <img src="../../../../assets/static/myInfo/a4.png" alt=""/>
        </label>
        <div>
          <!--          <span>0积分 奖励中心会员</span><span class="el-icon-arrow-right"></span>-->
          <span>{{ $t('home.0') }}</span>
          <span style="margin-left:5px">
            {{ $t('home.MembershipRewardingCentre') }}
          </span>
          <span class="el-icon-arrow-right"></span>
        </div>
      </div>
      <!-- input 输入框 -->
      <div class="title_cen">
        <!-- 账户 -->
        <div>
          <div class="card_title">
            <img src="../../../../assets/static/recharge/q4.png" alt=""/>
            <div>{{ $t('home.Name') }}</div>
          </div>
          <div class="consume_input consume_input_one">
            <input @change="changeMyInfo" v-model="info.nickname" placeholder=""/>
          </div>
        </div>
        <!-- 手机号 -->
        <div>
          <div class="card_title">
            <img src="../../../../assets/static/recharge/q4.png" alt=""/>
            <div>{{ $t('home.Mobile') }}</div>
          </div>
          <div class="consume_input consume_input_lia">
            <span>{{ info.code }}</span>
            <div class="mobile-content row-wrapper">
              <span>{{ info.mobile }}</span>
            </div>
            <!--            <input @change="changeMyInfo" v-model="info.mobile" placeholder=""/>-->
          </div>
        </div>
        <!-- 用户地址 -->
        <div>
          <div class="card_title">
            <img src="../../../../assets/static/recharge/q4.png" alt=""/>
            <div>{{ $t('home.Address') }}</div>
          </div>
          <div class="consume_input">
            <input @change="changeMyInfo"
                   v-model="info.address"
                   placeholder="请输入"/>
          </div>
        </div>
        <!--  -->
        <div>
          <div class="card_title">
            <img src="../../../../assets/static/recharge/q4.png" alt=""/>
            <div>{{ $t('home.Email') }}</div>
          </div>
          <div class="consume_input consume_input_lia consume_input_rimg row-wrapper"
               style="justify-content: space-between">
            <input v-model="email"
                   placeholder="请输入"/>
            <div v-show="emailCount===30" @click="sendVerifyToEmail" class="row-wrapper">
              <span>{{ $t('发送邮件') }}</span>
              <img style="margin-left: 5px" src="../../../../assets/static/myInfo/a2.png" alt="">
            </div>
            <div v-show="emailCount!==30" class="row-wrapper">
              <span>{{ emailCount }}s</span>
              <img style="margin-left: 5px" src="../../../../assets/static/myInfo/a2.png" alt="">
            </div>
          </div>
        </div>
        <!-- 文字 -->
        <div class="title_cen_size">
          <div v-show="showVerify">
            {{ $t('home.Haveyoureceivedit?') }}
          </div>
          <div v-show="showVerify"
               class="col-wrapper"
               style="align-items: flex-start">
            <span v-show="emailCount===30" @click="sendVerifyToEmail">
              {{ $t('home.Resendverificationemail') }}
            </span>
            <span v-show="emailCount!==30">
              {{ emailCount }}s
            </span>
            <div style="margin-top: 5px">
              <div class="card_title">
                <div>{{ $t('Email Verification Code') }}</div>
              </div>
              <div class="row-wrapper"
                   style="justify-content: space-between;width: 100%">
                <div class="consume_input consume_input_lia consume_input_rimg">
                  <input v-model="emailVerify" :placeholder="$t('请输入邮箱验证码')"/>
                </div>
                <Button @click="verifyEmail" class="veryfyButton">{{ $t('Verify') }}</Button>
              </div>
            </div>
          </div>
          <!--          <div>{{ $t('home.Userprofile') }}</div>-->
          <!--          <div>{{ $t('home.Addbusinesstemplate') }}</div>-->
          <!--          <div>{{ $t('home.Manageyourtravelexpensesbetter') }}</div>-->
        </div>
      </div>
    </div>
    <!-- 退出 -->
    <div @click="save" class="save">{{ $t('保存') }}</div>
    <!--    <div @click="$router.go(-1)" class="exit">{{ $t('home.Exit') }}</div>-->
  </div>
</template>

<script>
import {myInfo, changeMyInfo} from '@/api/merbership/my'
import {uploadImg} from '@/api/merbership/upload'
import '@/styles/flax.css'
import {sendVerifyToEmail, verifyEmail} from '@/api/merbership/login'

export default {
  data() {
    return {
      info: {
        nickname: '',
        mobile: '',
        address: '',
        email: undefined,
        head: ''
      },
      changeType: '',
      // -------------- email ---------------
      email: '',
      emailVerify: '',
      handsSendEmailVerify: false,
      showVerify: false,
      emailCount: 30,
      emailInterval: null
    }
  },
  activated() {
    this.myInfo()
    this.changeType = ''
  },
  deactivated() {
    clearInterval(this.emailInterval)
    this.handsSendEmailVerify = false
    this.showVerify = false
    this.emailCount = 30
  },
  watch: {
    emailCount(val) {
      if (val === 0) {
        clearInterval(this.emailInterval)
        this.handsSendEmailVerify = false
        this.emailCount = 30
      }
    }
  },
  methods: {
    /**
     * 保存我的信息
     */
    save() {
      this.changeType = 'button'
      this.changeMyInfo()
    },
    /**
     * 上传图片
     * @param e
     */
    uploadImgFun(e) {
      let params = new FormData()
      params.append('image', e.target.files[0])
      this.uploadImg(params)
    },
    // ----------------- axios --------------------
    /**
     * 验证邮箱
     */
    verifyEmail() {
      const pd = {
        user_email: this.email,
        code: this.emailVerify
      }
      verifyEmail(this.$qs.stringify(pd))
        .then(res => {
          if (res.data.code === 1) {
            this.$message.success(res.data.msg)
            this.info.email = this.email
            this.changeMyInfo()
            this.handsSendEmailVerify = false
            this.emailCount = 0
          } else {
            this.$message.error(res.data.msg)
          }
        })
    },
    /**
     * 发送邮箱验证码
     */
    sendVerifyToEmail() {
      let that = this
      this.emailInterval = setInterval(() => {
        that.emailCount--
      }, 1000)
      this.handsSendEmailVerify = true
      this.showVerify = true
      const pd = {
        user_email: this.email
      }
      sendVerifyToEmail(this.$qs.stringify(pd))
        .then(res => {
          // this.$message.success(res.data)
          if (res.data.code === 0) {
            this.$message.error(res.data.msg)
          } else {
            this.$message.success(res.data)
          }
        })
    },
    /**
     * 上传图片
     * @param pd
     */
    uploadImg(pd) {
      uploadImg(pd)
        .then(res => {
          if (res.data.code === 1) {
            this.$message.success(res.data.msg)
            this.info.head = res.data.data
            this.changeMyInfo()
          }
        })
    },
    /**
     * 我的信息
     */
    myInfo() {
      const pd = {}
      myInfo(pd)
        .then(res => {
          this.info = res.data.data
          this.email = this.info.email
        })
    },
    /**
     * 修改我的信息
     */
    changeMyInfo() {
      changeMyInfo(this.$qs.stringify(this.info))
        .then(res => {
          if (res.data.code === 1) {
            this.$message.success(res.data.msg)
            if (this.changeType === 'button') {
              this.$router.push({path: '/listMy'})
            }
          } else {
            this.$message.error(res.data.msg)
          }
        })
    }
  }
}
</script>

<style scoped>
.head {
  height: 80px;
  width: 80px;
  border-radius: 40px;
}

.mobile-content {
  height: 40px;
  margin-left: 20px;
}

.mobile-content > span {
  color: #1F1F1F;
  font-size: 15px;
}

.inputImg {
  display: none;
}

.box {
  padding-bottom: 10%;
  background-color: #F5F5F5;
}

/* 标题 */
.title {
  background-image: linear-gradient(to bottom, #7ac91b 35%, #f5f5f5 0);
  font-weight: bold;
}

.title .title_fan {
  color: #fff;
  font-size: 14px;
  padding: 15px;
}

/* 会员 */
.vip_info {
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  color: #fff;
}

.vip_info img {
  width: 90px;
}

/* 输入 提示 */
.title_cen {
  margin: 15px;
  padding: 15px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 5px 10px #ccc;
  color: #65BD06;
}

/* card 标题 */
.card_title {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
}

.card_title img {
  margin-right: 8px;
  width: 4px;
}

/* input 设置 */
.consume_input {
  font-size: 11px;
  margin: 15px 0;
  box-shadow: 0 0 5px #ccc;
  border-radius: 10px;
  overflow: hidden;
}

.consume_input input {
  width: 70%;
  outline: none;
  border: none;
  height: 40px;
  padding: 0 2%;
  font-size: 11px;
}

/* 第一个 提示文字颜色 */
.consume_input_one input::-webkit-input-placeholder {
  color: #67C41D;
}

/* input 框 附带其他 文字 img 等 */
.consume_input_lia {
  display: flex;
  align-items: center;
  padding: 0 10px;
}

/* 电子邮件 */
.consume_input_rimg img {
  width: 12px;
}

/* card 文字 */
.title_cen_size {
  font-size: 12px;
  color: #333333;
}

.title_cen_size > div {
  margin: 10px 0;
}

.title_cen_size > div:nth-child(2) > span {
  color: #67C41D;
  text-decoration: underline;
}

.veryfyButton {
  margin-left: 15px;
}

.title_cen_size > div:nth-child(4) {
  color: #FFB300;
  text-decoration: underline;
}

.title_cen_size > div:nth-child(5) {
  font-size: 11px;
  color: #999999;
}

/* 关联账户 */
.relevance {
  margin: 15px;
  font-size: 14px;
}

.transfer_card div {
  background-color: #fff;
  padding: 10px;
  margin: 15px 0;
  display: flex;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 3px 10px #ccc;
}

.transfer_card img {
  width: 25px;
  border-radius: 5px;
  margin-right: 10px;
}

/* 退出 */
.exit {
  background-image: linear-gradient(to bottom, #FF5555, #FF2626);
  margin: 40px;
  padding: 16px;
  color: #FFFFFF;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 0 3px #FF5555;
}

.save {
  background-image: linear-gradient(to bottom, #f5c969, #FFB300);
  margin: 40px 40px 0 40px;
  padding: 16px;
  color: #FFFFFF;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 0 3px #FF5555;
}
</style>
